<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体相应</title>
</head>

<style>

    /*
        min-width: 视口的最小宽度(视口大于指定宽度时生效) 
        max-width: 视口的最大宽度(视口小于指定宽度时生效)

        样式切换分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化
        一般比较常用的断点
       
        小于768 超小屏幕 max-width: 768px
        大于768 小屏幕   min-width: 768px
        大于992 中型屏幕 min-width: 992px
        大于1200 大屏幕  min-width: 1200px

        条件: and(等价于&&) 
              ,(等价于||)
    */
    
    @media only screen and (min-width: 600px) and (max-width: 800px){ /* 屏幕在600px到800px时生效 */
        body{
            background-color: #bfa;
        }
    }
</style>

<body>
    
</body>
</html>